<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频加密</title>
    <script src="/static/jquery-3.4.1.js"></script>
</head>
<body>
<video id="sound" width="500" height="300" controls="controls"></video>
</body>
<script>

    $(function () {
        vedioInit();
    });

    function vedioInit() {
        let xhr = new XMLHttpRequest();
        //配置请求方式、请求地址以及是否同步
        xhr.open('POST', '/api/vedio/play', true);
        //设置请求结果类型为blob
        xhr.responseType = 'blob';
        //请求成功回调函数
        xhr.onload = function (e) {
            if (this.status == 200) {//请求成功
                //获取blob对象
                var blob = this.response;
                //获取blob对象地址，并把值赋给容器
                /**
                 * 说明:
                 *      1. 用blob对象可以加密视频url.
                 */
                document.getElementById('sound').src=URL.createObjectURL(blob);
            }
        };
        xhr.send();
    }

</script>
</html>